网格布局控制#

这些修饰符用于控制视图在 Grid 网格布局中的行为，包括单元格的跨列、对齐方式、尺寸限制等，适用于构建灵活且精细的二维界面布局。

gridCellColumns#

设置某个视图在网格中跨越的列数。

类型#

1gridCellColumns?: number

说明#

用于让单个视图占据多个列，常见用法包括用作区块标题或需要额外水平空间的内容。

示例#

1<Grid>
2  <GridRow>
3    <Text gridCellColumns={2}>跨越两列的文本</Text>
4  </GridRow>
5  <GridRow>
6    <Text>单元格 A</Text>
7    <Text>单元格 B</Text>
8  </GridRow>
9</Grid>

gridCellAnchor#

设置当前视图在网格单元格内的对齐锚点。

类型#

1gridCellAnchor?: KeywordPoint | Point

说明#

使用关键词（如 "center"、"topLeading"）或自定义点（如 { x: 0.5, y: 0.0 }）来控制该视图在其单元格中的对齐位置。

示例#

1<Grid>
2  <GridRow>
3    <Text gridCellAnchor="topLeading">顶部左对齐</Text>
4  </GridRow>
5</Grid>

gridCellUnsizedAxes#

阻止网格在指定方向上为视图分配额外空间。

类型#

1gridCellUnsizedAxes?: AxisSet

说明#

此修饰符用于告诉网格布局：不要在特定方向（水平或垂直）扩展该视图的尺寸，使其内容尺寸更紧凑。

可选值#

• "horizontal" – 禁止水平扩展
• "vertical" – 禁止垂直扩展
• "all" – 禁止两个方向的扩展

示例#

1<Grid>
2  <GridRow>
3    <Image
4      gridCellUnsizedAxes="horizontal"
5      imageUrl="https://example.com/icon.png"
6    />
7    <Text>图标说明</Text>
8  </GridRow>
9</Grid>

gridColumnAlignment#

设置该视图所在列的水平对齐方式。

类型#

1gridColumnAlignment?: "leading" | "center" | "trailing"

说明#

此修饰符将影响该列中所有视图的水平对齐方式。通常只需要对列中的第一个视图设置即可。

示例#

1<Grid>
2  <GridRow>
3    <Text gridColumnAlignment="trailing">右对齐列</Text>
4    <Text>下一单元格</Text>
5  </GridRow>
6</Grid>

Grid 与 GridRow 结构说明#

上述修饰符需在 Grid 和 GridRow 结构内使用，结构类似 SwiftUI 的 Grid 布局系统。

Grid#

二维容器，按照行和列排列子视图。

可用属性#

• alignment?: Alignment — 网格中单元格的默认对齐方式
• horizontalSpacing?: number — 列之间的水平间距
• verticalSpacing?: number — 行之间的垂直间距

示例#

1<Grid>
2  <GridRow>
3    <Text>Hello</Text>
4    <Image systemName="globe" />
5  </GridRow>
6  <Divider />
7  <GridRow>
8    <Image systemName="hand.wave" />
9    <Text>World</Text>
10  </GridRow>
11</Grid>

GridRow#

表示网格中的一行，包含若干水平排列的单元格。

可用属性#

• alignment?: VerticalAlignment — 控制整行中内容的垂直对齐方式

总结#